<template>
  <div>
    <div class="msg_box">
      <div class="word">
        <img src="../../assets/pingjia_11.png" alt class="titleimg">
        <div class="wordtext">你好我是小瓜皮。。。。</div>
      </div>
    </div>
    <!-- 功能区 -->
    <div class="bom_gongneng">
      <ul class="les">
        <li class="bom_list">
          <div @click="yuyin()" v-if="status==1">
            <img src="../../assets/hudong/voice.png" alt>
          </div>
          <div class="jianpan" @click="jianpan()" v-else>
            <img src="../../assets/hudong/voice-active.png" alt>
          </div>
          <div class="box_put" v-if="status==1">
            <input type="text" v-model="searchput" @input="clent" style="padding:0;">
          </div>
          <div
            style="text-align: center; font-size: 1.2rem; box-sizing: border-box; margin-top:0;"
            v-else
            class="box_put"
          >
            <div class="speak" style="width:100%;">按住说话</div>
          </div>
          <div class="biaoqing">
            <img src="../../assets/hudong/emoji_v2.png" alt>
          </div>
          <div class="inpost" @click="zhuti()" v-if="rightbtn==1">
            <img src="../../assets/hudong/add-con.png" alt>
          </div>
          <div v-else class="fasong" @click="send()">
            <img src="./images/fasong.png" alt>
          </div>
        </li>
      </ul>
      <div class="box_add">
        <aside>
          <ul>
            <li class="box_zp">
              <div>
                <div class="zp_sun">
                  <label for="feast">
                    <img src alt>
                  </label>
                </div>
                <input
                  type="file"
                  accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
                  id="feast"
                >
              </div>
              <p>照片</p>
            </li>
            <li class="hongbao">
              <label for>
                <img src="../../assets/hudong/red-icon.png" alt>
              </label>
              <p>红包</p>
            </li>
            <li class="shang">
              <img src="../../assets/hudong/shang-icon.png" alt>
              <p>打赏</p>
            </li>
            <li class="shang">
              <img src="../../assets/hudong/ba-icon.png" alt>
              <p>霸屏</p>
            </li>
            <li class="shang">
              <img src="../../assets/hudong/position-icon.png" alt>
              <p>位置</p>
            </li>
            <li class="shang">
              <img src="../../assets/hudong/set-icon.png" alt>
              <p>设置</p>
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      searchput: "",
      rightbtn: 1,
      status: 1,
      companyid: this.$route.query.companyid,
      ceshi: 5
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    $(".ley").hide();
    console.log(this.id);
    console.log(this.companyid);
  },
  methods: {
    //   发送消息
      send(){
        console.log('发送消息')
      },
    // 消息框输入事件
    clent() {
      console.log(this.searchput);
      if (this.searchput == "") {
        this.rightbtn = 1;
      } else {
        this.rightbtn = 2;
      }
    },
    //   打开功能区
    zhuti() {
      $(".bom_gongneng").toggleClass("trm");
    },
    //    录音键盘切换
    yuyin() {
      //    $(".les").hide().siblings(".ley").show();
      this.status = 2;
    },
    //    录音键盘切换
    jianpan() {
      // $(".ley").hide().siblings(".les").show();
      this.status = 1;
    }
  }
};
</script>

<style scoped>
@import "../../assets/personal/css/new_hudong.css";
</style>